<template>
  <div class="app">
    <van-nav-bar
      title="点餐"
      left-text=""
      left-arrow
      class="colnav"
      @click-left="backlink"
    ></van-nav-bar>
    <div class="container">
      <van-sidebar v-model="active" @change="onChange" class="diancansidebar">
        <van-sidebar-item title="饮料" />
        <van-sidebar-item title="零食" />
        <van-sidebar-item title="小吃" />
      </van-sidebar>
      <div class="diancancontainer">
        <div
          class="typebox"
          v-for="(item, index) in foodlist"
          :key="index"
          :id="'box' + index"
        >
          <div class="type">{{ item.type }}</div>
          <div class="foodbox" v-for="(food, i) in item.list" :key="i">
            <div class="imgbox">
              <img v-lazy="food.foodimg" alt="" />
            </div>
            <div class="foodinfo">
              <div class="food-name-num">
                <div class="foodname">{{ food.foodname }}</div>
                <div class="foodnum">剩余:{{ food.foodnum }}</div>
              </div>
              <van-text-ellipsis
                :content="food.fooddes"
                class="fooddes"
                row="1"
              />
              <div class="food-price-num">
                <div class="foodprice">￥{{ food.foodprice }}</div>
                <div
                  style="display: flex; align-items: center; text-align: center"
                >
                  <van-button
                    icon="minus"
                    round
                    class="foodbtn"
                    v-if="food.ordernum > 0"
                    @click="decreasefood(food)"
                  />
                  <div v-if="food.ordernum > 0" class="ordernum">
                    {{ food.ordernum }}
                  </div>
                  <van-button
                    icon="plus"
                    round
                    class="foodbtn1"
                    @click="addfood(food)"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <el-card class="jiesuanbox" :body-style="{ padding: 0 }">
        <div
          v-if="orderlist.length > 0"
          class="yidian"
          @click="actionshow = !actionshow"
        >
          已点
        </div>
        <div class="heji">
          <div>合计:</div>
          <div class="price">￥{{ price }}</div>
        </div>
        <van-button class="xiadanbtn">下单</van-button>
      </el-card>
      <van-action-sheet
        class="actionsheet"
        v-model:show="actionshow"
        title="已点"
      >
        <div class="content">
          <div class="btnbox">
            <div class="qingkong" @click="qingkong">清空购物车</div>
          </div>
          <div class="orderlist" v-if="orderlist.length > 0">
            <div
              class="orderbox"
              v-for="(item, index) in orderlist"
              :key="index"
            >
              <div class="imgbox">
                <img v-lazy="item.foodimg" alt="" />
              </div>
              <div class="foodinfo">
                <div class="foodname">{{ item.foodname }}</div>
                <div class="food-price-num">
                  <div class="foodprice">￥{{ item.foodprice }}</div>
                  <div
                    style="
                      display: flex;
                      align-items: center;
                      text-align: center;
                    "
                  >
                    <van-button
                      icon="minus"
                      round
                      class="foodbtn"
                      v-if="item.ordernum > 0"
                      @click="decreasefood(item)"
                    />
                    <div v-if="item.ordernum > 0" class="ordernum">
                      {{ item.ordernum }}
                    </div>
                    <van-button
                      icon="plus"
                      round
                      class="foodbtn1"
                      @click="addfood(item)"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            v-else
            style="
              font-size: 20px;
              display: flex;
              justify-content: center;
              align-items: center;
            "
          >
            <div>暂未点单</div>
          </div>
        </div>
      </van-action-sheet>
    </div>
  </div>
</template>

<script>
import { showConfirmDialog } from "vant";
export default {
  data() {
    return {
      active: "",
      actionshow: false,
      checkedResult: [],
      orderlist: [],
      foodlist: [
        {
          type: "饮料",
          list: [
            {
              foodid: "1",
              foodtype: "饮料",
              foodname: "可乐",
              foodimg: require("../../assets/images/club2.jpg"),
              fooddes: "330ml，好喝的肥宅快乐水",
              foodprice: "5",
              foodnum: "10",
              ordernum: 0,
            },
            {
              foodid: "2",
              foodtype: "饮料",
              foodname: "雪碧",
              foodimg: require("../../assets/images/club2.jpg"),
              fooddes: "330ml，也是好喝的肥宅快乐水",
              foodprice: "5",
              foodnum: "80",
              ordernum: 0,
            },
            {
              foodid: "3",
              foodtype: "饮料",
              foodname: "可乐1",
              foodimg: require("../../assets/images/club2.jpg"),
              fooddes: "330ml，好喝的肥宅快乐水",
              foodprice: "5",
              foodnum: "10",
              ordernum: 0,
            },
            {
              foodid: "4",
              foodtype: "饮料",
              foodname: "雪碧1",
              foodimg: require("../../assets/images/club2.jpg"),
              fooddes: "330ml，也是好喝的肥宅快乐水",
              foodprice: "5",
              foodnum: "80",
              ordernum: 0,
            },
          ],
        },
        {
          type: "零食",
          list: [
            {
              foodid: "5",
              foodtype: "零食",
              foodname: "士力架",
              foodimg: require("../../assets/images/club2.jpg"),
              fooddes: "330g，横扫饥饿",
              foodprice: "8",
              foodnum: "100",
              ordernum: 0,
            },
            {
              foodid: "6",
              foodtype: "零食",
              foodname: "德芙巧克力",
              foodimg: require("../../assets/images/club2.jpg"),
              fooddes: "330g，纵享丝滑",
              foodprice: "8",
              foodnum: "10",
              ordernum: 0,
            },
            {
              foodid: "7",
              foodtype: "零食",
              foodname: "士力架1",
              foodimg: require("../../assets/images/club2.jpg"),
              fooddes: "330g，横扫饥饿",
              foodprice: "8",
              ordernum: 0,
              foodnum: "100",
            },
            {
              foodid: "8",
              foodtype: "零食",
              foodname: "德芙巧克力1",
              foodimg: require("../../assets/images/club2.jpg"),
              fooddes: "330g，纵享丝滑",
              foodprice: "8",
              ordernum: 0,
              foodnum: "10",
            },
          ],
        },
        {
          type: "小吃",
          list: [
            {
              foodid: "9",
              foodtype: "小吃",
              foodname: "煎包1",
              foodimg: require("../../assets/images/club2.jpg"),
              fooddes: "大份个6个，小份4个",
              foodprice: "5",
              ordernum: 0,
              foodnum: "10",
            },
            {
              foodid: "10",
              foodtype: "小吃",
              foodname: "煎饺1",
              foodimg: require("../../assets/images/club2.jpg"),
              fooddes: "大份个6个，小份4个",
              foodprice: "80",
              ordernum: 0,
              foodnum: "10",
            },
            {
              foodid: "11",
              foodtype: "小吃",
              foodname: "煎包1",
              foodimg: require("../../assets/images/club2.jpg"),
              fooddes: "大份个6个，小份4个",
              foodprice: "5",
              ordernum: 0,
              foodnum: "10",
            },
            {
              foodid: "12",
              foodtype: "小吃",
              foodname: "煎饺1",
              foodimg: require("../../assets/images/club2.jpg"),
              fooddes: "大份个6个，小份4个",
              foodprice: "80",
              ordernum: 0,
              foodnum: "10",
            },
          ],
        },
      ],
    };
  },
  methods: {
    backlink() {
      this.$router.back();
    },
    onChange(value) {
      const targetElement = document.getElementById("box" + value);
      const targetOffset = targetElement.offsetTop;
      window.scrollTo({
        top: targetOffset,
        behavior: "smooth",
      });
    },
    qingkong() {
      showConfirmDialog({
        title: "清空购物车",
        message: "确认清空购物车吗？",
      })
        .then(() => {
          this.orderlist = [];
          this.foodlist.forEach((category) => {
            category.list.forEach((food) => {
              food.ordernum = 0;
            });
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    addfood(food) {
      const foodInList = this.foodlist.find(
        (listItem) =>
          listItem.type === food.foodtype &&
          listItem.list.some((foodItem) => foodItem.foodname === food.foodname)
      );
      if (foodInList) {
        const foodItem = foodInList.list.find(
          (item) => item.foodname === food.foodname
        );
        foodItem.ordernum++;
      }
      const orderItem = this.orderlist.find(
        (orderItem) => orderItem.foodname === food.foodname
      );
      if (orderItem) {
        orderItem.numbers = orderItem.ordernum;
      } else {
        food.numbers = 1;
        this.orderlist.push(food);
      }
    },

    decreasefood(food) {
      const foodInList = this.foodlist.find(
        (listItem) =>
          listItem.type === food.foodtype &&
          listItem.list.some((foodItem) => foodItem.foodname === food.foodname)
      );
      if (foodInList) {
        const foodItem = foodInList.list.find(
          (item) => item.foodname === food.foodname
        );
        if (foodItem.ordernum > 0) {
          foodItem.ordernum--;
          foodItem.numbers = foodItem.ordernum;
        }
      }
      const orderIndex = this.orderlist.findIndex(
        (orderItem) => orderItem.foodname === food.foodname
      );
      if (orderIndex !== -1) {
        const orderItem = this.orderlist[orderIndex];
        if (orderItem.numbers <= 0) {
          this.orderlist.splice(orderIndex, 1);
        }
      }
    },
  },
  computed: {
    // 计算总价格
    price() {
      let total = 0;
      // 遍历订单列表中的每个商品，计算价格总和
      this.orderlist.forEach((item) => {
        total += item.foodprice * item.numbers;
      });
      return total;
    },
  },
};
</script>

<style scoped>
.app {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;
  background-color: #f7f8fa;
}
.colnav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
}
.container {
  position: relative;
}
.diancansidebar {
  position: fixed;
  top: 60px;
  left: 0;
  width: 20%;
  min-height: 100vh;
}
.diancansidebar .van-sidebar-item--select,
.van-sidebar-item--select:active {
  background-color: #e0e1e5;
}
.diancancontainer {
  position: absolute;
  top: 60px;
  left: 20%;
  width: 80%;
  background-color: white;
  height: auto;
  border-radius: 10px;
  box-sizing: border-box;
  padding-left: 5px;
  padding-right: 5px;
  overflow-y: scroll;
}
.type {
  font-size: 20px;
  margin: 5px;
}
.foodbox {
  width: 100%;
  display: flex;
  height: 75px;
  margin: 15px auto;
}
.imgbox {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  overflow: hidden;
}
.imgbox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.foodinfo {
  margin-left: 10px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.food-name-num {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.foodname {
  font-size: 20px;
}
.foodnum {
  color: #747474;
  font-size: 14px;
}
.fooddes {
  width: 80%;
  font-size: 16px;
  color: #747474;
}
.food-price-num {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.foodprice {
  font-size: 21px;
  color: #ff835d;
}
.foodbtn {
  width: 25px;
  height: 25px;
  color: #79a7fa;
  background-color: white;
}
.foodbtn1 {
  width: 25px;
  height: 25px;
  color: white;
  background-color: #79a7fa;
}
.ordernum {
  width: 30px;
  font-size: 17px;
}
.food-price-num .van-button--normal {
  padding: 0 !important;
}
.jiesuanbox {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 85%;
  height: 50px;
  background-color: white;
  border-radius: 25px;
  z-index: 3000;
}
.yidian {
  position: absolute;
  top: 50%;
  left: 5%;
  transform: translateY(-50%);
  font-size: 20px;
  width: 100px;
}
.heji {
  display: flex;
  align-items: flex-end;
  font-size: 18px;
  font-weight: bold;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.price {
  color: #ff835d;
  font-size: 20px;
  font-weight: bold;
}
.xiadanbtn {
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100%;
  background-color: #5f94fe;
  color: white;
}
.content {
  min-height: 200px;
  max-height: 500px;
  overflow: scroll;
  padding-bottom: 80px;
}
.content .btnbox {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 90%;
  margin: 0 auto;
}
.quanxuan {
  font-size: 15px;
}
.qingkong {
  font-size: 14px;
  color: #747474;
}
.orderlist {
  display: flex;
  flex-direction: column;
  width: 90%;
  margin: 0 auto;
  justify-content: center;
}
.orderbox {
  display: flex;
  width: 100%;
  height: 60px;
  margin: 10px auto;
}
.orderbox .imgbox {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.orderbox .imgbox .img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.orderbox .foodname {
  font-size: 16px;
}
</style>